<!doctype html>
<html>

<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<link rel="stylesheet" href="../res/css/weui.css" />
	<link rel="stylesheet" href="../res/css/weuix.css" />
	<link rel="stylesheet" href="../res/css/common.css" />
	<link rel="stylesheet" href="../res/css/swiper.css">
	<script src="../res/js/swiper.js"></script>
	<script src="../res/js/zepto.min.js"></script>
	<script src="../res/js/zepto.weui.js"></script>
	<script src="../res/js/common.js?v=5"></script>

	<script>
		var mySwiper, showPic;
		var ossdata = {}; //oss信息
		//就诊人列表信息
		var patientInfoList = []
		//swiper选择num
		var num = -1;
		//图片数组


		//swiper设置
		function swiper() {
			mySwiper = new Swiper('#banner .swiper-container', {
				loop: false,
				autoplay: false,
				pagination: {
					el: '#banner .swiper-pagination',
				},
				slidesPerView: 'auto',
				spaceBetween: 10,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
				on: {
					click: function () {
						num = this.clickedIndex
						projectParams.id = patientInfoList[num].id
						$('.swiper-slide').eq(num).addClass("active")
						$('.swiper-slide').eq(num).siblings().removeClass("active")
						$("#btnInquiry").text(`立即预约(就诊人${patientInfoList[num].patientName})`)
					},
				},
			})
			showPic = new Swiper('.showPic .swiper-container', {
				loop: false,
				autoplay: false,
				pagination: {
					el: '.showPic .swiper-pagination',
				},
				slidesPerView: 'auto',
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
				on: {
					click: function () {
						$('.showPic').hide();
						$(".background").hide()
					},
				},
			})
		}

		//获取就诊人信息列表
		function getInquiryPatientInfoList() {
			newAjaxPost("/h5/patientInfo/getHisInquiryPatientInfoList", {}, (json) => {
				patientInfoList = json.data.list;
				let swiperSlide = ""
                if (patientInfoList.length !== 0) {
                    num = 0
					projectParams.id = patientInfoList[0].id
                    $("#btnInquiry").text(`立即预约(就诊人${patientInfoList[0].patientName})`)
                }
				patientInfoList.forEach((ele, index) => {
					swiperSlide +=
						`<div class="swiper-slide ${index === 0 ? 'active' : ''}" >
							<div><span style="overflow:hidden;text-overflow: ellipsis">${ele.patientName}</span><img src="../res/images/edit.png" alt="" onclick="changeInfo(${ele.id})"></div>
							<div style="font-size: 14px;color: #666666;font-weight: 500;">${ele.patientSex == 1?"男":"女"} ${ele.patientAge}岁 ${setPaymentMethod(ele.paymentMethod)}</div>
						</div>`
				});
				$("#banner .swiper-wrapper").html(swiperSlide)
			})
		}

		//修改就诊人信息
		function changeInfo(id) {
			goPage(`patient_info.htm?id=${id}`)
		}

		//添加就诊人信息
		function addInfo() {
			goPage(`patient_info.htm`)
		}


		$(function () {
            // 设置项目列表高度
            let projectListHeight = window.innerHeight - 430
            $('.project-list').height(projectListHeight)
			//获取就诊人信息列表 （ 解决ios返回页面不刷新）
			window.onpageshow = function () {
				getInquiryPatientInfoList()
			}
			//swiper
			swiper()

            // 获取项目列表
            getProjectList()
			//立即咨询
			$('#btnInquiry').click(function () {
				if (!projectParams.diagItemId) {
					msgInfo('请先选择项目')
					return
				}
				newAjaxPost("/h5/checklistClass/reservationInspect", projectParams, (res) => {
					if (res.code == 1) {
						$("#tip-mask").show()
					} else {
						msgInfo('预约失败，请重新预约')
					}
				})
			});
		});

		function func() {
			return false;
		}

		// 就诊人列表中显示付费类型
		function setPaymentMethod(type) {
			return type === 2 ? '医保付费' : '自费'
		}

        // 项目项目tab
        let tabType = 1
        function changeTab(type) {
            tabType = type
            $('.change-project-tab > div').removeClass('tab-active')
            $(`.change-project-tab > div:nth-child(${type})`).addClass('tab-active')
			projectParams.businessCode = tabType === 1 ? 'S0002' : 'S0001'
			projectParams.diagItemId = ''
            getProjectList()
        }

        // 获取项目列表
		let projectList = [] 
		let projectParams = {
			"businessCode": "S0002",
			"diagItemId": "",
			"id": 0
		}
        function getProjectList () {
            let api = tabType === 1 ? "/h5/checklistClass/getInspectList" : '/h5/checklistClass/getCheckList'
            newAjaxPost(api, {}, (res) => {
				projectList = res.data
				let htmStr = ''
				projectList.forEach((item, index) => {
					htmStr += `<div class="project-item">
						<div class="project-part">
							<p class="project-name">${item.diag_name}${tabType == 1 ? item.specimans.length !== 0 ? `(${item.specimans[1].specimans_name})` : '' : ''}</p>
							${tabType == 2 ? ` <p class="project-type">类别：${item.exam_class_dict_name}</p>` : ''}
						</div>
						<div class="project-option ${index === 0 ? 'option-ok' : 'option-no'}" onClick="selectProject(${index})">
							<img src="../res/images/right.png" alt=""/>
							<img src="../res/images/wrong.png" alt="" choose="1"/>
						</div>
					</div>`
				})
				if (projectList.length === 0) {
					htmStr = '<div style="text-align: center; margin-top: 20px;" >暂无数据</div>'
				} else {
					projectParams.businessCode = tabType === 1 ? 'S0002' : 'S0001'
					projectParams.diagItemId = projectList[0].lab_diag_dict_id
				}
				$('.project-list').html(htmStr)
			})
        }
        
       function selectProject(index) {
		   $('.project-option').removeClass('option-ok').addClass('option-no')
		   $(`.project-item:nth-child(${index + 1}) > .project-option`).removeClass('option-no').addClass('option-ok')
		   projectParams.diagItemId = projectList[index].lab_diag_dict_id
       }
	</script>
	<style>
		.weixin-tip {
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			margin: 0;
			padding: 0;
			background: rgba(0, 0, 0, 0.8);
			filter: alpha(opacity=80);
			z-index: 99;
		}

		.weixin-tip p {
			text-align: center;
			margin-top: 10%;
			padding: 0 5%;
		}

		.weixin-tip img {
			max-width: 100%;
			height: auto;
		}

		.weui-header-fixed-top {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
			background: #F6F6F9
		}


		.weui-cell {
			display: block;
			padding: 0 10px;
		}

		.weui-label {
			font-weight: unset;
			display: block;
			height: 40px;
			line-height: 40px;
			width: 110px;
		}

		.weui-cell__bd {
			height: 40px;
			line-height: 38px;
			font-size: 15px;
		}

		.weui-form-li {
			display: contents;
		}

		strong {
			display: block;
		}

		.weui-search-bar__box .weui-icon-clear {
			right: 24px;
		}

		.weui-search-btn {
			background: #1189ff;
			text-align: center;
			color: #ffffff;
			border-radius: 10px;
			position: absolute;
			right: 0;
			top: 0;
			white-space: nowrap;
			width: 80px;
			line-height: 40px;
			height: 40px;
		}

		.picker-items-col-center {
			width: 100%;
		}

		#weuiAgree {
			width: 16px;
			height: 16px;
		}

		.top {
			font-size: 14px;
			padding: 10px;
			display: block;
			text-align: center;
		}

		.top span {
			margin: 0 10px;
		}

		.tip {
			background-color: #fff;
			width: 95%;
			margin: 0px 2.5% 10px;
			border-radius: 10px;
			overflow: hidden;
		}

		.tip div:nth-child(1) {
			font-size: 16px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #222222;
			margin: 8px 0;
			text-align: center;
			word-spacing: 2px;
		}

		.tip div:nth-child(2) {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin: 8px 0;
			text-align: center;
		}

		.chooseUser {
			display: flex;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			padding: 0 15px;
			padding-top: 15px;
			width: 100%;
		}

		.chooseUser p:nth-child(1) {
			width: 80%;
		}

		#banner{
			overflow: hidden;
		}
		
		#banner .swiper-container {
			/* width: 100%; */
			padding: 10px 5px;
		}

		#banner .swiper-slide {
			width: 35%;
			padding: 15px;
			border: 1px solid #F1F1F3;
			margin: 5px 0px;
		}

		.active {
			border: 1px solid #03A6FF !important;
			background: #F5FBFF !important;
		}

		#banner .swiper-slide img {
			width: 13px;
			height: 13px;
		}

		#banner .swiper-slide div {
			display: flex;
			justify-content: space-between;
			font-size: 17px;
			font-weight: bold;
			color: #353535;
			font-family: PingFang-SC-Medium;
			align-items: center;
			margin: 5px 0;
		}

		.uploadPhotos {
			overflow: hidden;
			margin-top: 0;
			margin-bottom: 0;
		}

		.uploadPhotos>div {
			margin: 10px 0;
		}

		.uploadPhotos .upload-title {
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
		}

		.img-tips, .inquiry-tips {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.tip-content {
			margin: 10px 15px;
		}

		.tip-content > span {
			color: #03A6FF;
			font-size: 18px;
			font-weight: 500;
		}

		.first-inquiry, .first-inquiry-time {
			padding: 1px;
			font-size: 15px;
			color: #666;
			display: flex;
			align-items: center;
		}

		#inquiryTime, #firstInquiryHos{
			flex-grow: 1;
			border: 1px solid #666;
			margin-left: 10px;
			padding: 5px;
			border-radius: 4px;
		}

		.chooseImage{
			text-align: center;
		}

		.imageWrappar {
			/* width: 100%; */
			display: flex;
			flex-wrap: wrap;
			justify-content: left;
			align-items: center;
		}

		.imageWrappar .imageItem {
			margin: 5px !important;
			width: 70px;
			height: 70px;
			background: rgba(3, 166, 255, 0.06);
			border-radius: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.imageWrappar .imageItem img {
			width: 25px;
			height: 23px;
			margin-top: 10px;
		}

		.imageWrappar .imageItem p {
			width: 100%;
			font-weight: 500;
			color: #03A6FF !important;
			text-align: center;
		}

		.imageWrappar .imageItem #img-upload {
			position: absolute;
			top: 0;
			left: 0;
			width: 70px;
			height: 70px;
			background: rgba(3, 166, 255, 0.06);
			opacity: 0;
		}

		.imageWrappar .imageItem .showImage {
			width: 100%;
			height: 100%;
			display: none;
			margin: 0;
		}

		.imageWrappar .imageItem .deleteImage {
			width: 25px;
			width: 25px;
			display: none;
			margin: 0;
			position: absolute;
			top: -12.5px;
			right: -12.5px;
		}

		.background {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			background: rgba(0, 0, 0);
			z-index: 99;
		}

		.showPic {
			width: 100%;
			background-color: rgba(0, 0, 0);
			;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
		}

		.weui-label {
			font-size: 15px;
			width: 100px;
		}
		#tip-mask{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #0006;
			z-index: 9;
			display: none;
		}
		
		.tipShow {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 105;
			width: 80%;
			background-color: #fff;
			font-size: 15px;
			border-radius: 8px;
		}

		.tipShow .tipTitle {
			display: flex;
			justify-content: space-between;
			padding: 10px;
		}

		.tipShow .tipTitle div:last-child {
			color: #03A6FF;
		}

		.tipShow .tipMessage {
			margin: 20px 0;
			text-align: center;
		}



		.weui-btn{
			border: 1px solid #0003;
		}
		.weui-btn::after{
			display: none;
		}


        /* 项目列表 */
        .change-project-tab {
            display: flex;
            margin: 10px;
        }
        .change-project-tab  div {
            margin-right: 24px;
        }
        .change-project-tab .tab-active {
            color: #03A6FF;
            font-weight: bold;
        }
        .project-list {
            overflow-y: auto;
            margin-top: 20px;
        }
        .project-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #F1F1F3;
        }
        .project-item:last-child {
            border-bottom:  none;
        }
        .project-part {
            width: 60%;
        }
        .project-name {
            font-size: 16px;
        }
        .project-type {
            font-size: 14px;
            color: #B2B2B2;
        }
        .project-option > img {
            width: 25x;
            height: 25px;
        }
        .option-ok > img:first-child, .option-no > img:last-child {
            display: block;
        }
        .option-ok > img:last-child, .option-no > img:first-child {
            display: none;
        }
	</style>
</head>

<body ontouchstart>
	<div class="weixin-tip">
		<p>
			<img src="../res/images/live_weixin.png" alt="浏览器打开" />
		</p>
	</div>
	<div class="weui-header-fixed-top">
		<div class="weui-header weui-btn_primary">
			<div class="weui-header-left"><a id="btnBack" class="icon icon-109" onclick="history.back()"> </a></div>
			<div class="weui-header-title">自主开单</div>
			<div class="weui-header-right"></div>
		</div>
	</div>
	<div class="weui-cells weui-cells_form" style="margin-top:45px">
		<div class="top"><span>选择患者</span><span>></span><span>选择项目</span><span>></span><span>申请预约</span></div>
		<!-- 问诊方式选择 -->
		<div class="weui-cell">
			<div class="weui-cell-list" id="banner">
				<div class="chooseUser">
					<p>请选择就诊人<span style="color: red;"> *</span></p>
					<p onclick="addInfo()"><span style="color: #03A6FF;">+</span>添加</p>
				</div>
				<div class="swiper-container">
					<div class="swiper-wrapper">
					</div>
				</div>
			</div>
		</div>

        <div class="weui-cell">
            <div class="chooseUser"><p>请选择项目<span style="color: red;"> *</span></p></div>
            <div class="change-project-tab">
                <div class="tab-active" onclick="changeTab(1)">检验项目</div>
                <div onclick="changeTab(2)">检查项目</div>
            </div>
            <div class="project-list"></div>
		</div>
		<a class="weui-btn weui-btn_mini bg-blue f-white" href="javascript:;" id="btnInquiry"
			style="font-size: 17px; margin: 0 5%; width: 90%;">立即预约
		</a>
	</div>
	<div id="tip-mask">
		<div class="tipShow">
			<div class="tipTitle">
				<div>温馨提示</div>
				<div onclick="$('#tip-mask').hide()">关闭</div>
			</div>
			<div class="tipMessage">
				恭喜您！预约成功！
				<div class="tip-content">
					请移步到【<span>成都温江区人民医院</span>】公众号，
					进入【<span>首页 - 门诊缴费</span>】进行支付或到线下医院现场支付</div>
			</div>
		</div>
	</div>
</body>

</html>